<template>
  <jke-modal :visible.sync="jkeForm.visible" :width="1200" :title="jkeForm.title" :fullscreen.sync="jkeForm.fullscreen"
    :switchFullscreen="jkeForm.switchFullscreen">
    <div class="form-body" :style="{ height: jkeForm.fullscreen ? 'calc(100vh - 112px)' : 'auto' }">
      <a-card title="基础信息" :bordered="false" style="margin-top: 12px">
        <a-form-model ref="ruleForm" :model="formData" :rules="rules">
          <a-row>
            <a-col :span="7">
              <a-form-model-item label="工单编号" style="width: 100%" prop="orderCode">
                <a-input @click="outopenIt" v-model="formData.orderCode" placeholder="请选择" :read-only="true"
                  :class="formData.orderCode ? 'has-value' : ''">
                  <a-icon slot="suffix" type="down" style="color: #cdcdcd; font-size: 12px" class="down-icon" />
                  <a-icon slot="suffix" type="close-circle" theme="filled" class="close-icon"
                    @click="getSaleSelectValue(false, '', [])" />
                </a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="1"></a-col>
            <a-col :span="7">
              <a-form-model-item label="生产物品" style="width: 100%">
                <a-input v-model="goodsName" disabled />
              </a-form-model-item>
            </a-col>
            <a-col :span="1"></a-col>
            <a-col :span="7">
              <a-form-model-item label="单位" style="width: 100%">
                <a-input v-model="formData.unitName" disabled />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="7">
              <!-- 生产任务的报工弹窗工序是直接回显，不可更改，生产报工的报工弹窗工序是可选的，根据情况渲染字段 -->
              <a-form-model-item label="工序" style="width: 100%" prop="processId">
                <a-select style="width: 100%" v-model="formData.processId" @change="changeProcess" placeholder="请选择">
                  <a-select-option v-for="item in processesList" :value="item.taskId" :key="item.taskId">
                    {{ item.processesName }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="1"></a-col>
            <a-col :span="7">
              <a-form-model-item label="计划数" style="width: 100%">
                <a-input v-model="formData.planProduceNum" disabled />
              </a-form-model-item>
            </a-col>
            <a-col :span="1"></a-col>
            <a-col :span="7">
              <a-form-model-item style="width: 100%" prop="allocateType">
                <template #label>
                  <span slot="label">
                    任务进度&nbsp;
                  </span>
                </template>
                <a-input v-model="progress" disabled />
                <a-progress :percent="percent" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="7">
              <a-form-model-item prop="userId" label="生产人员" style="width: 100%">
                <j-select-user-by-dep v-model="formData.userId" @changeRow="onChangeUser"></j-select-user-by-dep>
              </a-form-model-item>
            </a-col>
            <a-col :span="1"></a-col>
            <a-col :span="7">
              <a-form-model-item label="报工数" style="width: 100%">
                <a-input v-model="reportNumPro" disabled />
              </a-form-model-item>
            </a-col>
            <a-col :span="1"></a-col>
            <a-col :span="7"> </a-col>
          </a-row>
          <a-row>
            <a-col :span="7">
              <a-form-model-item prop="qualifiedNum" label="合格数" style="width: 100%">
                <a-input style="width: 100%" @input="inputChange(formData.qualifiedNum)" v-model="formData.qualifiedNum"
                  :min="0" />
              </a-form-model-item>
            </a-col>
            <a-col :span="1"></a-col>
            <a-col :span="7">
              <a-form-model-item prop="unqualifiedQuantityNum" label="不合格数" style="width: 100%">
                <a-input :value="unqualifiedString" @click="selectNonconformingItem" />
              </a-form-model-item>
            </a-col>
            <a-col :span="1"></a-col>
            <a-col :span="7">
              <a-form-model-item prop="reportTime" label="报工时间" style="width: 100%">
                <a-date-picker style="width: 100%" v-model="formData.reportTime" show-time format="YYYY-MM-DD HH:mm:ss"
                  placeholder="请选择" @openChange="handleStartOpenChange" />
              </a-form-model-item>
            </a-col>

            <a-col :span="24">
              <a-form-model-item prop="attachment" label="附件" style="width: 100%">
                <FileUpload ref='fileUpload' :ids="formData.attachment" :max='3' @getFileList="getFileList">
                </FileUpload>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </a-card>
      <createFormItem style="margin-top: 12px; margin-bottom: 12px; flex: 1" ref="createFormItemRef" :formType="4" />
    </div>
    <div class="footer-submit" :class="jkeForm.fullscreen ? 'form-footer' : ''">
      <a-button @click="cancel" class="submitBtn" style="margin-right: 10px"> 取消</a-button>
      <a-button @click="Resume" v-if="!isEdit()" class="submitBtn" style="margin-right: 10px"> 继续报工
      </a-button>

      <a-button type="primary" :loading="loading" class="submitBtn" @click="onSubmit"> 提交</a-button>
    </div>

    <!--不合格项弹窗-->
    <a-modal v-model="nonConformanceVisible" title="不合格数输入" @ok="handleOk">
      <!-- {{ disqualificationData }} -->
      <a-table row-key="nonconformityId" :columns="disqualificationColumns" :pagination="false"
        :dataSource="disqualificationData">
        <div slot="index" slot-scope="text, record, index">
          {{ index + 1 }}
        </div>
        <div slot="nonconformityNum" slot-scope="text, record">
          <a-input :style="{ border: record.red ? '1px solid red' : '' }" v-model="record.nonconformityNum"
            placeholder="请输入" :min="0" @input="changeConformityNum(record.nonconformityNum, record)" />
        </div>
      </a-table>
      <template slot="footer">
        <div style="display: flex; justify-content: space-between; align-items: center">
          <div>
            <span>不合格原因：{{ unqualifiedRows }}</span>，
            <span>不合格数：{{ unqualifiedNumber }}</span>
          </div>
          <div>
            <a-button key="back" @click="handleCancel"> 取消</a-button>
            <a-button key="submit" type="primary" :loading="loadingSubmit" @click="handleOk"> 确定</a-button>
          </div>
        </div>
      </template>
    </a-modal>
    <goodsTableSelect ref="SaleSelect" @getSelectValue="getSaleSelectValue" :key="Selectindex"> </goodsTableSelect>
  </jke-modal>
</template>
<script>
import { productOrderList } from '@/api/productOrder'
import createFormItem from '@/components/createForm.vue'
import goodsTableSelect from '@/components/goodsTableSelect'
import FileUpload from '@/components/fileActions/FileUpload.vue'
import { columnshand, getTypeList } from './allColumn'
import {
  productionReportingAdd,
  productionReportingEdit,
  detailId,
  processDetail,
} from '@/api/produce/productionManage'
import { unqualifiedList } from '@/api/quality/index'
import moment from 'moment'
import { clearNoNum } from '@/utils/util'
export default {
  name: 'processChangeForm',
  components: { FileUpload, goodsTableSelect, createFormItem },
  props: {
    rowData: {
      type: Object | null,
    },
  },
  created() {
    getTypeList()
  },
  data() {
    return {
      columnshand,
      processesCodeList: [],
      processesList: [],
      visible: false,
      Selectindex: 0,
      goodsName: '',
      formData: {
        userId: '',
        orderId: '',
        taskId: '',
        orderCode: undefined,
        unitName: '',
        planProduceNum: '',
        reportNum: '',
        qualifiedNum: 0,
        unqualifiedQuantityNum: 0,
        unqualifiedDtos: [],
        reportTime: '',
        processId: '',
      },
      reportWorkNum: 0,
      processesList: [],
      rules: {
        orderCode: [{ required: true, message: '请选择工单编号', trigger: 'change' }],
        processId: [{ required: true, message: '请选择工序', trigger: 'change' }],
        qualifiedNum: [{ required: true, message: '请输入合格数', trigger: 'change' }],
        unqualifiedQuantityNum: [{ required: true, message: '请输入合格不合格数', trigger: 'change' }],
        reportTime: [{ required: true, message: '请选择时间', trigger: 'change' }],
        userId: [{ required: true, message: '请选择操作人', trigger: 'change,trigger' }],
        num: [{ required: true, message: '报工数不能为空', trigger: 'change' }],
      },
      jkeForm: {
        title: '生产报工',
        visible: false,
        fullscreen: true,
        switchFullscreen: true,
      },
      loadingSubmit: false,
      loading: false,
      taskFlag: 0,
      orderList: [],
      batchDatas: [], //批次列表
      nonConformanceVisible: false,
      disqualificationData: [], //不合格项列表
      disqualificationColumns: [
        {
          title: '序号',
          ellipsis: true,
          dataIndex: 'index',
          scopedSlots: {
            customRender: 'index',
          },
        },
        {
          title: '不合格原因',
          ellipsis: true,
          dataIndex: 'unqualifiedName',
        },
        {
          title: '数量',
          dataIndex: 'nonconformityNum',
          scopedSlots: {
            customRender: 'nonconformityNum',
          },
        },
      ],
      reportNumPro: 0,
      disabledOperator: false,
      operatorDatas: [],
      planProduceNum: 0, //用于计算进度的计划数
      progressReportNum: 0, //用于计算进度的报工数
    }
  },
  methods: {
    changeConformityNum(value, record) {
      if (value) {
        let num = clearNoNum(value)
        record.nonconformityNum = num
      }
    },
    inputChange(value) {
      if (value) {
        let num = clearNoNum(value)
        // if (Number(num) + Number(this.formData.unqualifiedQuantityNum) > Number(this.reportWorkNum)) {
        //   this.formData.qualifiedNum = ''
        //   this.$antdMessage.info('报工数不能大于计划数！')
        //   return
        // } else {
        /* if (Number(num) + Number(this.formData.unqualifiedQuantityNum) > Number(this.reportWorkNum)) {
          this.formData.qualifiedNum = ''
          this.$antdMessage.info('报工数不能大于计划数！')
          return
        } else { */
        this.formData.qualifiedNum = num
        // this.reportNumPro = Number(this.formData.unqualifiedQuantityNum) + Number(this.formData.qualifiedNum)
        // }
        this.reportNumPro = Number(this.formData.unqualifiedQuantityNum) + Number(this.formData.qualifiedNum)
        // }
      }
    },
    handleStartOpenChange() { },
    onChangeUser(storeVals, row) {
      console.log(storeVals)
      console.log(row)
      let newStr = ''
      if (row.length > 0) {
        let newArr = []
        let arrTwo = []
        for (let item of row) {
          newArr.push(item.id)
          arrTwo.push(item.realname)
        }
        if (newArr.length > 0) {
          newStr = newArr.join(',')
        }
        if (arrTwo.length > 0) {
          this.showPrincipalStr = arrTwo.join(',')
        }
      } else {
        newStr = ''
        this.showPrincipalStr = ''
      }
      this.$set(this.formData, 'userId', newStr)
    },
    outopenIt() {
      console.log(this.formData, 'this.formData')

      let par = {
        list: '/produceorder/produceOrderInfo/list',
        visible: true, //弹窗开启
        title: '生产工单', //标题名称
        multi: false, //是否多选
        columns: this.columnshand, //表格配置
        value: this.formData.orderCode, //需要回显的数据，如：id:'12323213,321312312,321312312'
        valueKey: 'orderCode', //需要拿到数据的key，如：id，userId等
        text: '工单编号', //回显的中文，如：'张三'
        textKey: 'orderCode', //回显的中文key
        action: 'post',
        argument: {
          orderStatus: '1',
          isTask: true,
          formData: this.formData
        },
      }
      this.$refs.SaleSelect.getInit(par)
    },
    getSaleSelectValue(id, text, item) {
      console.log(id, text, item, '列表选择的数据')
      if (!id) {
        this.formData.orderCode = ''
        this.processesList = []
        this.formData.processId = ''
        this.formData.orderId = ''
        return
      }
      this.Selectindex += 1 //重置组件去除表格默认勾选数据，让自己赋值的数据回显（重要！！！）
      this.formData.orderCode = id
      this.formData.orderId = item[0].id
      this.formData.processId = ''
      this.formData.planProduceNum = ''
      this.progressReportNum = 0
      this.planProduceNum = 0
      this.processesList = item[0].produceOrderTaskVo
      this.goodsName = `${item[0].serialNumber}|${item[0].serialName || ''}|${item[0].serialSpecifications || ''}`
      this.formData.unitName = item[0].unitName || '-'
    },
    async initData() {
      const {
        result: { records },
      } = await unqualifiedList({ pageNo: 1, pageSize: 100000 })
      this.disqualificationData = (records || []).map((item, index) => ({
        nonconformityNum: '',
        nonconformityId: item.id,
        unqualifiedName: item.nonconformityDescribe,
        index: index + 1,
      }))
    },

    init(code) {
      productOrderList({ pageNo: 1, pageSize: 100000 }).then((res) => {
        if (res.code == 200) {
          let list = res.result.records
          list.forEach((el) => {
            if (el.orderCode == code) {
              this.processesList = el.produceOrderTaskVo
            }
          })
        }
      })
    },

    // 根据获取工序详情
    async changeProcess(v, { edit = false }) {
      this.formData.taskId = v
      let { result, code } = await processDetail({ id: v })
      if (code == 200) {
        if (edit) {
          this.reportWorkNum = result.reportWorkNum
          return
        }
        var qualifiedNum = Number(result.planNum) - Number(result.reportNum)
        this.formData.qualifiedNum = qualifiedNum < 0 ? 0 : qualifiedNum
        this.reportWorkNum = result.reportWorkNum < 0 ? 0 : result.reportWorkNum
        this.formData.planProduceNum = result.planNum
        this.formData.reportTime = moment().format('YYYY-MM-DD HH:mm:ss')
        this.progressReportNum = result.reportNum
        this.planProduceNum = result.planNum
        this.reportNumPro = this.reportWorkNum
        this.disqualificationData.forEach((item) => {
          item.nonconformityNum = ''
        })
      }
    },

    initDetail(query) {
      this.jkeForm.visible = true
      if (query && query.id) {
        this.formData.id = query.id
        this.initData()
        this.detailId()
      } else {
        this.formData.userId = ''
        this.formData.id = ''
        this.formData.taskId = ''
        this.formData.orderId = ''
        this.formData.orderCode = ''
        this.formData.unitName = ''
        this.formData.planProduceNum = ''
        this.formData.reportNum = ''
        this.formData.taskId = ''
        this.formData.qualifiedNum = 0
        this.formData.unqualifiedQuantityNum = 0
        this.formData.unqualifiedDtos = []
        this.formData.processId = ''
        this.formData.reportTime = moment().format('YYYY-MM-DD HH:mm:ss')
        this.goodsName = ''
        this.processesList = []
        this.progressReportNum = 0
        this.reportNumPro = 0
        this.planProduceNum = 0
        this.initData()
      }
    },
    getNum(nonList, nonconformityId) {
      // console.log(nonList,'nonList',nonconformityId)
      const num = nonList.filter((o) => {
        return o.nonconformityId == nonconformityId
      })
      return num && num.length > 0 ? num[0].nonconformityNum : ''
    },
    detailId() {
      detailId({ id: this.formData.id }).then(async (res) => {
        console.log(res.result.produceOrderReportWorkNonconformityDetailVoList, '详情')
        if (res.code == 200) {
          //不合格原因
          //
          let nonList = res.result.produceOrderReportWorkNonconformityDetailVoList || ''
          if (nonList && nonList.length > 0) {
            this.disqualificationData = this.disqualificationData.map((item, index) => ({
              ...item,
              nonconformityNum: this.getNum(nonList, item.nonconformityId),
            }))
          }

          this.formData.orderId = res.result.orderId
          this.formData.attachment = res.result.attachment
          this.$refs.fileUpload.initFile(res.result.attachment)

          this.formData.orderCode = res.result.orderCode
          this.formData.qualifiedNum = res.result.qualifiedNum
          this.formData.reportTime = res.result.reportTime
          this.formData.taskId = res.result.taskId
          this.formData.unqualifiedQuantityNum = res.result.unqualifiedNum
          this.formData.userId = res.result.userId
          this.formData.unqualifiedDtos = res.result.produceOrderReportWorkNonconformityDetailVoList
          this.formData.processId = res.result.taskId
          this.goodsName = `${res.result.serialNumber}|${res.result.serialName || ''}|${res.result.serialSpecifications || ''}`
          this.formData.unitName = res.result.unitName
          let { result, code } = await processDetail({ id: this.formData.taskId })
          if (code == 200) {
            this.progressReportNum = result.reportNum
            this.planProduceNum = result.planNum
            this.formData.planProduceNum = result.planNum
            this.reportNumPro = Number(this.formData.qualifiedNum) + Number(this.formData.unqualifiedQuantityNum)
          }
          this.changeProcess(this.formData.taskId, { edit: true })
          this.init(this.formData.orderCode)
          setTimeout(() => {
            this.$refs.createFormItemRef.setFields({ ...res.result, inWarehouseTimeText: res.result.inWarehouseTime })
          }, 100)
        }
      })
    },
    operatorChange(storeVals, row) {
      this.$forceUpdate()
    },

    Resume() {
      if (Number(this.formData.qualifiedNum) + Number(this.formData.unqualifiedQuantityNum) <= 0) {
        this.$antdMessage.error('输入的合格数+不合格数必须大于0')
        return
      }
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          this.$refs.createFormItemRef.form.validateFields(async (err, values2) => {
            if (!err) {
              this.loading = true
              if (this.formData.id) {
                this.formData.unqualifiedDtos.forEach((item) => {
                  item.reportId = this.formData.id
                })
              }
              let form = {
                id: this.formData.id,
                qualifiedNum: this.formData.qualifiedNum,
                reportTime: moment().format('YYYY-MM-DD HH:mm:ss'),
                taskId: this.formData.taskId,
                unqualifiedNum: this.formData.unqualifiedQuantityNum,
                userId: this.formData.userId,
                produceOrderReportWorkNonconformityDetail: this.formData.unqualifiedDtos,
              }
              form.extDataJson = values2.extDataJson
              const { code, message } = await (this.formData.id ? productionReportingEdit : productionReportingAdd)(
                form
              )
              if (code === 200) {
                this.$parent.searchQuery()
                this.$antdMessage.success(message)
                let taskId = this.formData.taskId
                this.changeProcess(taskId, {
                  edit: this.isEdit()
                }
                )
              } else {
                this.$antdMessage.error(message)
              }
              this.loading = false
            } else {
              return false
            }
          })
        } else {
          return false
        }
      })
    },

    isEdit() {
      return this.formData.id !== undefined
        && this.formData.id != null
        && this.formData.id !== ''
    },

    onSubmit() {
      if (Number(this.formData.qualifiedNum) + Number(this.formData.unqualifiedQuantityNum) <= 0) {
        this.$antdMessage.error('输入的合格数+不合格数必须大于0')
        return
      }
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          this.$refs.createFormItemRef.form.validateFields(async (err, values2) => {
            if (!err) {
              this.loading = true
              if (this.formData.id) {
                this.formData.unqualifiedDtos.forEach((item) => {
                  item.reportId = this.formData.id
                })
              }

              let form = {
                id: this.formData.id,
                qualifiedNum: this.formData.qualifiedNum,
                reportTime: moment(this.formData.reportTime).format('YYYY-MM-DD HH:mm:ss'),
                taskId: this.formData.taskId,
                unqualifiedNum: this.formData.unqualifiedQuantityNum,
                userId: this.formData.userId,
                produceOrderReportWorkNonconformityDetail: this.formData.unqualifiedDtos,
                attachment: this.formData.attachment,
              }
              form.extDataJson = values2.extDataJson
              let extendedFields = this.$refs.createFormItemRef.formTypeExtendedFields
              console.log(Array.isArray(extendedFields), 'formTypeExtendedFields')
              let extDataJson = values2.extDataJson
              extendedFields.forEach(item => {
                console.log(item, 'iiii', values2.extDataJson)
                for (const itemKey in extDataJson) {
                  if (itemKey == item.fieldKey && item.fieldMust == 1) {
                    console.log(itemKey, 'itemKeyitemKey')
                    extDataJson[itemKey] = item.placeholder
                  }
                }
              })

              const { code, message } = await (this.formData.id ? productionReportingEdit : productionReportingAdd)(
                form
              )
              this.loading = false
              if (code === 200) {
                this.$antdMessage.success(message)
                this.jkeForm.visible = false
                this.$parent.searchQuery()
              } else {
                this.$antdMessage.error(message)
              }

            } else {
              return false
            }
          })
        } else {
          return false
        }
      })
    },
    resetForm() {
      this.$refs.ruleForm.resetFields()
    },
    cancel() {
      this.jkeForm.visible = false
      this.$emit('confirm')
    },

    // 不合格项填写
    selectNonconformingItem(item, index) {
      this.nonConformanceVisible = true
    },
    handleCancel() {
      this.nonConformanceVisible = false
    },
    // 确认不合格项的填写
    handleOk() {
      console.log('0000', this.disqualificationData)
      let data = this.disqualificationData.filter((item) => item.nonconformityNum)
      if (data.length > 0) {
        this.formData.unqualifiedDtos = JSON.parse(JSON.stringify(data)).map((item) => {
          return {
            nonconformityDescribe: item.unqualifiedName,
            ...item,
          }
        })
      }
      this.formData.unqualifiedQuantityNum = this.unqualifiedNumber




      // if (
      //   Number(this.formData.unqualifiedQuantityNum) + Number(this.formData.qualifiedNum) >
      //   Number(this.reportWorkNum)
      // ) {
      //   this.$antdMessage.warning('报工数不能大于计划数')
      //   this.formData.unqualifiedQuantityNum = ''
      //   this.formData.unqualifiedDtos = []
      /* if (
        Number(this.formData.unqualifiedQuantityNum) + Number(this.formData.qualifiedNum) >
        Number(this.reportWorkNum)
      ) {
        this.$antdMessage.warning('报工数不能大于计划数')
        this.formData.unqualifiedQuantityNum = ''
        this.formData.unqualifiedDtos = []

        return
      } */
      //   return
      // }
      this.reportNumPro = Number(this.formData.unqualifiedQuantityNum) + Number(this.formData.qualifiedNum)
      this.handleCancel()
    },
    /* 获取附件 */
    getFileList(v) {
      this.formData.attachment = v
    },
  },
  computed: {
    percent() {
      let number = (this.progressReportNum / this.planProduceNum) * 100
      return Math.floor(number * 100) / 100
    },
    progress() {
      return Math.floor(this.progressReportNum * 100) / 100 + '/' + Math.floor(this.planProduceNum * 100) / 100
    },
    // 不合格项数量
    unqualifiedNumber() {
      return this.disqualificationData && this.disqualificationData.length > 0
        ? this.disqualificationData.reduce((num, item) => num + (Number(item.nonconformityNum) || 0), 0)
        : 0
    },
    // 不合格项项
    unqualifiedRows() {
      return this.disqualificationData.filter((item) => item.nonconformityNum).length
    },
    unqualifiedString() {
      // console.log(this.disqualificationData)
      // console.log(this.formData,'this.formData')
      if (!this.formData.unqualifiedDtos.length) {
        return ''
      }
      // 如果清空了数据，需要清除formData的不合格原因
      if (this.disqualificationData.every(item => !item.nonconformityNum)) {
        this.formData.unqualifiedQuantityNum = ''
        this.formData.unqualifiedDtos = []
        return ''
      }

      const totalNum = this.formData.unqualifiedDtos.reduce((total, item) => {
        return total + Number(item.nonconformityNum)
      }, 0)

      const reasonArr = this.formData.unqualifiedDtos.map((item) => {
        return `${item.nonconformityDescribe}: ${item.nonconformityNum}`
      })

      return `总数: ${totalNum}，${reasonArr.join('， ')}`
    },
  },
  watch: {
    'jkeForm.visible': function (val) {
      if (!val) {
        this.cancel()
      }
    },
    'formData.unqualifiedQuantityNum': function (val) {
      this.formData.num = (this.formData.qualifiedNum || 0) + (val || 0) || ''
    },
    'formData.qualifiedNum': function (val) {
      this.formData.num = (val || 0) + (this.formData.unqualifiedQuantityNum || 0) || ''
    },
  },
}
</script>
<style lang="less" scoped>
.auto-code-input {
  :deep(.ant-input) {
    border-right: 0px !important;
  }

  :deep(.ant-input-group-addon) {
    border-left: 0px !important;
  }
}

.flex(@jc, @ai, @fd: row) {
  display: flex;
  justify-content: @jc;
  align-items: @ai;
  flex-direction: @fd;
}

.form-body {
  display: flex;
  flex-direction: column;
}

.form-footer {
  position: absolute;
  bottom: 0;
  right: 0;
  padding-left: 100px;
  z-index: 2;
}

.submitBtn {
  .flex(center, center);
  padding: 8px;
}

.code-btn {
  position: absolute;
  right: 0;
  top: -34.5px;
}

.mb20 {
  margin-bottom: 20px;
}
</style>
